<script setup>
import VideoPlaySvg from "@/components/svg/VideoPlaySvg.vue";
import {useRouter} from "vue-router";

const router = useRouter()


const props = defineProps(({
  currentTime: {
    type: Number,
    default: 0
  },
  video: {
    type: Object,
    default: {}
  },
  flex: {
    type: String,
    default: "column"
  },
  height: {
    type: String,
    default: '100%'
  },
  width: {
    type: String,
    default: '100%'
  },
  isHistory: {
    type: Boolean,
    default: false
  }
}))
const toVideoDetail = (videoCode) => {

  console.log("currentTime=" + props.currentTime)
  if (props.isHistory) {

    console.log(props.currentTime == 0)
    if (props.currentTime == 0) {
      router.push({path: `/play/${videoCode}`})
    } else {
      router.push({path: `/play/${videoCode}`, query: {time: props.currentTime}})
    }
  } else {
    router.push({path: `/video/detail/${videoCode}`})
  }
}
</script>
<template>
  <div class="video-card" :style="{flexDirection:`${props.flex}`,height:`${props.height}`}">
    <div class="img-box" :style="{width:`${props.width}`}">
      <el-image class="cover" fit="cover" :src="props.video.videoCover"/>
      <div class="mark">
        <div class="icon" @click="toVideoDetail(props.video.videoCode)">
          <VideoPlaySvg style="width: 30px;height: 30px;transform: translateX(9%)"/>
        </div>
      </div>
    </div>
    <div class="video-info" :style="{margin: `${props.flex==='column'?'10px 0 0 0':'0 0 0 10px'}`}">
      <div>
        <p class="video-name">{{ props.video.videoName }}</p>
        <p class="video-actor">
          {{ props.video.actorList && props.video.actorList.length > 0 ? props.video.actorList.join("/") : '' }}</p>
      </div>
      <slot name="history"></slot>
    </div>
  </div>
</template>


<style scoped lang="less">
.video-card {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.img-box {
  position: relative;
  border-radius: 8px;
  overflow: hidden;

  .cover {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 8px;
  }

  .mark {
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    top: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: rgba(0, 0, 0, .4);
    border-radius: 8px;
    z-index: 2;
    transition: all .5s;

    .icon {
      width: 48px;
      height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      transition: all .4s ease-in-out;
    }

    .icon:hover {
      cursor: pointer;
      background-color: lightpink;
    }
  }

  .mark:hover {
    opacity: 1;
  }
}

.video-info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: white;

  .video-name {
    cursor: pointer;
    //color: #222222;
    font-size: 15px;
    font-weight: 600;
  }

  .video-actor {
    margin-top: 5px;
    font-size: 12px;
    //color: #191919;
  }
}

.video-card:hover .video-name {
  color: #f6aab4;
}
</style>
